<template>
  <div>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>

    <el-tree
      class="filter-tree"
      :data="treeDataList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="tree"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      @check-change="handleCheckChange">
    </el-tree>

  </div>
</template>

<script>
export default {
  name: 'TreeSelect',
  props: {
    originalDataList: {
      type: Array,
      default: _ => ([])
    },
  },
  data() {
    return {
      filterText: '',
      treeDataList: [],
      treeSaveList: [],
      defaultProps: {
        id: 'id',
        children: 'children',
        label: 'label'
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.$refs.tree.setCurrentKey(this.currentId)
    })
    this.treeDataList = [...this.originalDataList]
    this.treeSaveList = []
    console.log(4444444, this.originalDataList)
  },
  beforeDestroy() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(1111111, data);
      if (data.id === 1) {
        return false;
      }

      console.log(22222222, checked, indeterminate);
      if (checked) {
        this.treeSaveList.push(data)
        return false;
      }

      this.treeSaveList = this.treeSaveList.filter(item => item.label !== data.label)
    },
    getTreeSelectData() {
      return this.treeSaveList
    },
  }
}
</script>

<style scoped>

</style>
